/* Essential font imports */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");

/* Tab container - this will apply to any container with tabs */
[class*="tab-container"] {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

/* Hide all radio inputs */
input[type="radio"] {
  display: none;
}

/* Generic tabbed section styling - applies to all levels */
section[class*="tabbed"] {
  display: none;
  padding: 1rem;
  border: 1px solid #ddd;
  width: 100%;
  order: 99;
  position: relative;
  z-index: 0;
}

/* Tab label styling - applies to all levels */
label {
  display: inline-flex;
  align-items: center;
  padding: 15px 25px 15px 15px;
  font-weight: 600;
  color: var(--background-primary);
  cursor: pointer;
  position: relative;
  z-index: 1;
  gap: 10px;
}

/* Hover state for all labels */
label:hover {
  color: #888;
  background-color: var(--brand-color-secondary-50);
}

/* Icon styling using pseudo-element */
label:before {
  font-family: 'FontAwesome';
  content: attr(data-icon);
  display: inline-block;
  flex-shrink: 0;
}


/* Active tab styling for all levels */
input:checked + label {
  color: var(--color-secondary-dark);
  border: 1px solid #ddd;
  border-top: 2px solid var(--brand-color);
  border-bottom: 1px solid var(--background-primary);
  background-color: var(--background-primary);
  margin-bottom: -1px;
  z-index: 1;
}

/* Show content for active tabs at any level */
input:checked + label + section[class*="tabbed"] {
  display: block;
}

/* Nested tab specific styling */
section[class*="tabbed"] input:checked + label {
  font-size: 0.95em;
  padding: 10px 20px 10px 10px;
  border-bottom-color: #fff;  /* Match content background */
  position: relative;
  z-index: 2;  /* Ensure tab appears above content border 
}

section[class*="tabbed"] section[class*="tabbed"] {
  padding: 0.75rem;
  border-top: none;  /* Remove top border to prevent double border */
  margin-top: -1px;  /* Connect with the tab border */
}

/* Mobile responsiveness */
@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }
  
  label i {
    font-size: 18px;
    margin: 0;
  }
  
  section[class*="tabbed"] label {
    padding: 12px;  /* Adjusted padding for nested tabs on mobile */
  }
}

@media screen and (max-width: 400px) {
  [class*="tab-container"] {
    flex-direction: column;
  }
}